<template>
  <AreaTree v-model="list.filter.areaCode" :isAll="false" isDefault>
    <AuthButton
      @click="addItem('batch')"
      slot="bottomBtn"
      type="primary"
      name="批量新增"
    />
    <div class="app-container">
      <el-form
        ref="listFilterRef"
        :model="list.filter"
        inline
        class="list-filter"
      >
        <el-form-item prop="name">
          <el-input v-model="list.filter.name" placeholder="名称搜索" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <div class="table-operation">
        <AuthButton @click="addItem()" name="新增" />
        <el-pagination
          v-bind="elPaginationProps"
          :total="list.total"
          :currentPage.sync="list.filter.pageNo"
          :pageSize.sync="list.filter.pageSize"
        />
      </div>

      <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
        <el-table-column label="展示顺序" prop="sequenceNumber" />
        <el-table-column label="名称" prop="name" />
        <el-table-column label="跳转类型" prop="type">
          <template slot-scope="{ row }">
            {{ row.type | $value2label(dict.link_type) }}
          </template>
        </el-table-column>
        <el-table-column label="跳转项名称" prop="srcName" />
        <el-table-column label="操作" class-name="small-padding">
          <template slot-scope="{ row }">
            <auth-button @click="u({ id: row.id })" name="编辑" />
            <auth-button @click="d({ id: row.id })" name="删除" />
          </template>
        </el-table-column>
      </el-table>

      <KiFormDialog
        :show.sync="form.show"
        :title="formTitle"
        v-model="form.data"
        :submit="submitForm"
        :readonly="form.status === 'r'"
        ref="formRef"
        :loading="form.loading"
      >
        <template #el-form>
          <el-form-item label="所属地区" prop="areaCode" verify>
            <RegionSelect
              v-model="form.data.areaCode"
              :props="{ multiple: true }"
              :disabled="form.status === 'u' || newType == 'single'"
            />
          </el-form-item>
          <el-form-item label="名称" prop="name" verify>
            <el-input
              v-model="form.data.name"
              maxlength="30"
              placeholder="请输入"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="序号" prop="sequenceNumber" verify>
            <Sort v-model="form.data.sequenceNumber" />
          </el-form-item>
          <el-form-item label="跳转页面" prop="type" verify>
            <GlobalSearch
              v-model="form.data.srcId"
              :type.sync="form.data.type"
              :sourceId.sync="form.data.srcId"
              :sourceName.sync="form.data.srcName"
            />
          </el-form-item>
        </template>
      </KiFormDialog>
    </div>
  </AreaTree>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'

export default {
  mixins: [pageMixin],
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'one-travel-api/popular-search'
    }, {
      getListInitially: false
    }),
  watch: {
    'list.filter.areaCode'(n, o) {
      if(n && !o) {
        this.queryList()
      }
    }
  },
  data () {
    return {
      newType: ''
    }
  },
  methods: {
    // single 新增单个 ，batch 批量
    addItem (type = 'single') {
      this.newType = type
      this.form.data.areaCode =
        type == 'single' ? [this.list.filter.areaCode] : []
      this.c()
    }
  }
}
</script>
